<template>
  <div>
    <div class="wrapper">
      <div class="container container-login">
        <a href="javascript:;" title="返回首页" class="logo">骡窝窝</a>
        <div class="signup-forms flip">
          <div class="login-box" id="_j_login_box" v-show="!isShow">
            <div class="inner inner_v2 clearfix">
              <div class="inner_v2_left">
                <form id="_j_login_form" action="javascript:;">
                  <div class="form-field">
                    <input
                      id="inputPassword"
                      type="text"
                      placeholder="您的手机号"
                      value=""
                      v-model="phoneNum"
                    />

                    <div class="err-tip"></div>
                  </div>
                  <div class="submit-btn">
                    <button id="_js_loginBtn" @click="zhuCe">立即注册</button>
                  </div>
                </form>
                <div class="agreement">
                  注册视为同意<a target="_blank" href="javascript:;"
                    >《骡窝窝用户使用协议》</a
                  >
                </div>
                <div class="connect">
                  <p class="hd">用合作网站账户直接登录</p>
                  <div class="bd">
                    <a href="javascript:;" class="weibo"><i></i>新浪微博</a>
                    <a href="javascript:;" class="qq"><i></i>QQ</a>
                    <a href="javascript:;" class="weixin"><i></i>微信</a>
                    <div class="clear"></div>
                  </div>
                </div>
              </div>
              <div class="inner_v2_right">
                <img src="../assets/images/qrcode.jpg" />
                <p>扫一扫<br />下载骡窝窝APP</p>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="signup-box" v-show="isShow">
            <div class="add-info">
              <div class="hd">账号注册</div>
              <form method="post" id="editForm">
                <input
                  type="hidden"
                  name="phone"
                  value=""
                  id="phone"
                  v-model="phone1"
                />
                <div class="form-field m-t-10">
                  <input
                    name="nickname"
                    type="text"
                    placeholder="您的昵称"
                    v-model="username"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="password"
                    type="password"
                    placeholder="您的密码"
                    v-model="password1"
                  />
                  <div class="err-tip"></div>
                </div>
                <div class="form-field">
                  <input
                    name="rpassword"
                    type="password"
                    placeholder="确认密码"
                    v-model="password2"
                  />
                  <div class="err-tip"></div>
                </div>

                <div class="form-field">
                  <div class="clearfix">
                    <a href="javascript:;" class="vcode-send sms-code-send"
                      >获取验证码</a
                    >
                    <input
                      name="verifyCode"
                      type="text"
                      placeholder="短信验证码"
                      autocomplete="off"
                      class="vcode-input"
                      v-model="password3"
                    />
                  </div>
                  <div class="err-tip clearfix"></div>
                </div>
                <div class="submit-btn">
                  <button type="submit" @click.prevent="enroll">
                    完成注册
                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fullscreen-bg"></div>
  </div>
</template>

<script>
import ".././css/base.css";
import ".././css/regist.css";
import { IsZhuCeAPI, ZhuCeAPI } from "../request/api";
//  let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
export default {
  data() {
    return {
      phoneNum: "",
      isShow: false,
      phone1: "",
      username: "",
      password1: "",
      password2: "",
      password3: "",
    };
  },
  methods: {
    // 检查是否注册
    async zhuCe() {
      var reg_tel =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
      console.log(reg_tel.test(this.phoneNum));
      //   console.log(this.phoneNum);
      if (!reg_tel.test(this.phoneNum)) {
        // console.log(reg_tel.test(this.phoneNum));
        alert("请输入正确的手机号码");
        return;
      }

      let res = await IsZhuCeAPI({ phone: this.phoneNum });
      console.log(res);
      if (!res.data) {
        alert("该手机已注册");
        return;
      }
      this.isShow = res.data;
    //   console.log(this.isShow);
    },
    // 完成注册
    async enroll() {
      let res = await ZhuCeAPI({
        phone: this.phoneNum,
        nickname: this.username,
        password: this.password1,
        rpassword: this.password2,
        verifyCode: this.password3,
      });
      console.log(res);
      if (res.code === 200) {
        let token = localStorage.setItem("token", res.token);
        console.log(token);
        this.$router.push("/login");
      } else {
        alert(res.msg);
        return;
      }
    },
  },
};
</script>

<style>
*{
 margin-top: ;   
}
</style>